//组件

/*
header-top  最顶部的顶部栏  分为未登录和已登录两种
header-search-global  顶部全栈搜索栏
header-search-shop  顶部店铺内搜索栏
comment-top-nav  通用顶部导航栏
goods-top-banner  商品详情页顶部 通栏显示的banner
goods-top-nav  商品详情页顶部 导航栏
com-footer  大多数页面的页脚
*/

//最顶部的顶部栏  分为未登录和已登录两种
/*
login:布尔值  用来判断是否登录
*/
Vue.component("header-top", {
    template: `
    <div class="common_head-bg">
        <div class="common_head container">
            <div class="common_head-left" v-if="!(loginName)">
                <p>嗨，欢迎来聚衣网</p>
                <a href="../../html/login/login.html" title="请登录">请登录</a>
                <a href="../../html/login/registration.html" title="免费注册">免费注册</a>
            </div>
            <div class="common_head-left" v-if="loginName">
                <a href="../../html/index/index.html" title="聚衣首页">聚衣首页</a>
                <div class="common_head-left-menu">
                    <p>{{loginName}}<i class="icon-head_top_arr"></i></p>
                    <div class="common_head-left-menu-sub">
                        <a href="../../html/setting/settings.html">账户管理</a>
                        <a href="javascript:loginOut()" >退出</a>
                    </div>
                </div>
            </div>
            <div class="common_head-right">
                <a href="javascript:;" @click="goUser" title="我的聚衣">我的聚衣</a>
                <a href="#" title="我的订单">我的订单</a>
                <a href="javascript:;" @click="goCart" title="购物车">购物车</a>
                <a href="http://store.juyihome.com" title="商家服务">商家服务</a>
            </div>
        </div>
    </div>
    `,
    data() {
        return {
            loginName: sessionStorage.getItem("loginName")
        }
    },
    methods: {
        //跳转到 购物车
        goCart() {
            if (this.loginName != null) {
                window.location.href = '../../html/cart/my_cart.html';
            } else {
                alert("请先登录");
                sessionStorage.setItem("beforeUrl", window.document.location.href)
                window.location.href = '../../html/login/login.html';
            }
        },
        //跳转到用户 个人中心
        goUser() {
            if (this.loginName != null) {
                window.location.href = '../../html/usercenter/order_list.html';
            } else {
                alert("请先登录");
                sessionStorage.setItem("beforeUrl", window.document.location.href)
                window.location.href = '../../html/login/login.html';
            }
        },

    }
});

//顶部全栈搜索栏
Vue.component("header-search-global", {
    props: ["searchparams"],
    data() {
        return {
            val: this.searchparams
        }
    },
    template: `
    <div class="common_head_search_global container">
        <a href="http://www.juyihome.com/" class="logo"><img src="../../img/logo.png" title="聚衣商城"></a>
        <div class="search">
            <input v-model="val" placeholder="搜索  商品 / 分类 / 店铺">
            <button @click="seachByKey">搜索</button>
        </div>
        <a href="javascript:;" class="cart" @click="goCart">
            我的购物车
            <i class="icon-head_cart"></i>
            <p>0</p>
        </a>
    </div>
    `,
    methods: {
        seachByKey: function() {
            //判断是搜索商品还是店铺
            if (this.val == undefined) {
                this.val = '';
            }
            axios({
                method: 'get',
                url: urlParam.domain() + '/api/productInfo/shopOrProduct?keyword=' + this.val,
                responseType: 'stream',
            }).then(function(response) {
                //alert(response.data.data.pcUrl);
                window.location.href = response.data.data.pcUrl;
                //window.location.href="http://localhost:8000/dist/html/index/search.html?searchResult=1&keyword=大衣";
            });
        },
        goCart() {
            if (userLogin.ifLogin()) {
                window.location.href = '../../html/cart/my_cart.html';
            }

        }
    },


});

//顶部店铺内搜索栏
/*
 shopinfo:{
     "QQ": "1028815059",
      "shipmentPrice": 0.01,
      "depict": 3,
      "shopLogo": "http://file.juyihome.com/20171117/a768553c-d8e0-4cca-9668-e21dc13e3733.jpg",`
      "businessId": 1,
      "shopName": "哈哈店铺",
      "logistics": 2.91,
      "backgroundImg": "http://file.juyihome.com/20171117/18be0284-2fd0-4dca-b4cd-ee4613dbce92.jpg",
      "pcBackground":"",
      "isFocus": 1,//关注的初始状态 1，未关注 0，已关注
      "service": 3.55,
      "newProductNum": 8,
      "allProductNum": 10,
      "shopId": 4,
      "href": "http://app.juyihome.com/html/shop/shop_i.html?shopId=1"
 }
*/
Vue.component("header-search-shop", {
    props: ["shopinfo", "keyword"],
    template: `
    <div class="common_head_search_shop container">
        <div class="left">
            <a class="left-logo" href="http://www.juyihome.com/"><img src="../../img/logo.png" title="聚衣商城"></a>
            <div class="left-title">
                <p>{{shopinfo.shopName}}</p>
                <div class="left-title-oper">
                    <p @click="followShop(shopinfo)"><i :class="shopinfo.isFocus? 'icon-header_follow':'icon-header_follow_cur' " ></i>{{ shopinfo.isFocus?"未关注":"已关注" }}</p>
                    <div class="left-title-oper-qq"><a :href="'tencent://message/?uin='+shopinfo.QQ+'&Site=http://vps.shuidazhe.com&Menu=yes'"><i class="icon-header_qq"></i></a></div>
                </div>
            </div>
            <div class="left-code">
                <div class="left-code-col">
                    <p>描述</p>
                    <p>{{shopinfo.depict}}<i class="icon-header_up"></i></p>
                </div>
                <div class="left-code-col">
                    <p>服务</p>
                    <p>{{shopinfo.service}}<i class="icon-header_down"></i></p>
                </div>
                <div class="left-code-col">
                    <p>物流</p>
                    <p>{{shopinfo.logistics}}<i class="icon-header_stable"></i></p>
                </div>
            </div>
        </div>
        <div class="right">
            <input v-model="keyword" placeholder="搜索  商品 / 品牌 / 店铺">
            <button @click="searchAllProduct">搜全站</button>
            <button @click="serachShopProduct">搜本店</button>
        </div>
    </div>
    `,
    methods: {
        followShop: function(obj) {
            var type = this.shopinfo.isFocus;
            type == 1 ? type = 0 : type = 1;
            console.log(type);
            var that = this;
            //return;
            axios({
                method: 'post',
                url: urlParam.domain() + '/api/user/focusShop',
                params: {
                    sellerId: obj.shopId,
                    type: type,
                    token: urlParam.token()
                },
                //  responseType: 'stream',
            }).then(function(response) {
                if (response.data.code == 401) {
                    userLogin.ifLogin();
                } else {
                    //alert(response.data);
                    that.shopinfo.isFocus = type;
                }
            });
        },
        searchAllProduct: function() {
            //搜索全站
            if (this.keyword == undefined) {
                this.keyword = '';
            }
            axios({
                method: 'get',
                url: urlParam.domain() + '/api/productInfo/shopOrProduct?keyword=' + this.keyword,
                responseType: 'stream',
            }).then(function(response) {
                window.location.href = response.data.data.pcUrl;
                //window.location.href="http://localhost:8000/dist/html/index/search.html?searchResult=1&keyword=5";
            });
        },
        serachShopProduct: function() {
            //搜本店
            if (this.keyword == undefined) {
                this.keyword = '';
            }
        },
    }
});

//通用顶部导航栏
Vue.component("comment-top-nav", {
    props: ["topnavlist"],
    template: `
    <div>
        <div class="comment_top_nav container">
            <div class="comment_top_nav-left" @mouseenter="inNavLeft">
                <h1>全部商品分类</h1>
                <div class="comment_top_nav-left-con-box" v-if="topnavlist.headLeftList">
                    <div class="comment_top_nav-left-con" v-for="item in topnavlist.headLeftList">
                        <h1>{{item.name}}<span class="font-arr">></span></h1>
                        <p>
                            <a :href="a.href" :title="a.name" v-for="a in item.children">{{a.name}}</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="comment_top_nav-right">
                <ul>
                    <li><a href="http://www.juyihome.com" >首页</a></li>
                     <li v-for="item in topnavlist.rightNavList">
                        <a :href="item.href" :class="{cur:item.title==topnavlist.curnav}">{{item.title}}</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="comment_top_nav_bt"></div>
    </div>
    `,
    data() {
        return {
            rightNavList: [],
            headLeftList: null
        }
    },
    methods: {
        inNavLeft: function() {
            let that = this;
            //ajax数据请求只触发一次
            if (that.topnavlist.headLeftList) { return }
            //获取分类
            axios({
                method: 'get',
                url: urlParam.domain() + '/api/category/categoryListPC',
                responseType: 'stream',
            }).then(function(response) {
                that.headLeftList = response.data.data;
                that.$set(that.topnavlist, "headLeftList", that.headLeftList);
            });
        }
    },
    created() {
        let that = this;
        //获取广告位
        axios({
            method: 'get',
            url: urlParam.domain() + '/api/ad/adOnePC',
            params: {
                adPostionId: 34
            },
            responseType: 'stream'
        }).then(function(response) {
            that.rightNavList = response.data.data.list;
            that.$set(that.topnavlist, "rightNavList", that.rightNavList);
        });
    }
});

//商品详情页顶部 通栏显示的banner
Vue.component("goods-top-banner", {
    props: ["imgsrc"],
    template: `
    <div class="common_logobanner-bg" :style="{ 'background-image':'url('+imgsrc+')' }">
        <div class="common_logobanner-img container"><img :src="imgsrc"></div>
    </div>
    `
});

//通用 横屏通栏显示banner 图片高度450px
Vue.component("comment-corss-banner", {
    props: ["imgsrc"],
    template: `
    <div class="comment_corss_banner-bg" :style="{ 'background-image':'url('+imgsrc+')' }">
        <div class="comment_corss_banner-img container"><img :src="imgsrc"></div>
    </div>
    `
});

//商品详情页顶部 导航栏
Vue.component("goods-top-nav", {
    props: ["businessid"],
    template: `
    <div class="common_goods_nav-bg">
        <div class="common_goods_nav container">
            <ul>
                <li v-for="item in navlist"><a :href="item.href+'?businessId='+businessid" :title="item.title">{{item.title}}</a></li>
            </ul>
        </div>
    </div>
    `,
    data() {
        return {
            navlist: []
        }
    },
    created() {
        let that = this;
        //获取广告位
        axios({
            method: 'get',
            url: urlParam.domain() + '/api/ad/adOnePC',
            params: {
                adPostionId: 41
            },
            responseType: 'stream'
        }).then(function(response) {
            that.navlist = response.data.data.list;
        });
    }
});

//路径导航
Vue.component("common-crumb", {
    props: ["crumblist"],
    template: `
    <div class="common_crumb container">
        <ul>
            <li v-for="(item,index) in crumblist"><a :href="index < (crumblist.length-1) && item.href" :title="item.text">{{item.text}}</a><span class="font-arr" v-if="index < (crumblist.length-1)">></span></li>
        </ul>
    </div>
    `
});

//我的聚衣-头部
Vue.component("user-top", {
    props: [],
    template: `
    <div class="bg_red">
      <div class="container">
        <a href="#"></a>
        <div class="header_main">
          <span class="me">我的聚衣</span>
          <span class="back">返回聚衣首页</span>
        </div>
        <ul class="list clear">
          <li>首页</li>
          <li>账户管理
            <i class="icon-down_1"></i>
          </li>
          <li>消息</li>
        </ul>
        <div class="input_group">
          <input type="text" placeholder="搜索 商品">
          <button>搜索</button>
        </div>
      </div>
    </div>
    `
});

//大多数页面的页脚
Vue.component("com-footer", {
    template: `
    <div class="common_footer-bg">
        <div class="common_footer container">
            <div class="common_footer-top">
                <div class="common_footer-top-col">
                    <img src="../../img/footer_icon1.png">
                    <div class="common_footer-top-col-text">
                        <h1>正品保障</h1>
                        <p>正品保障、提供发票</p>
                    </div>
                </div>
                <div class="common_footer-top-col">
                    <img src="../../img/footer_icon2.png">
                    <div class="common_footer-top-col-text">
                        <h1>急速物流</h1>
                        <p>如约送货、送货入户</p>
                    </div>
                </div>
                <div class="common_footer-top-col">
                    <img src="../../img/footer_icon3.png">
                    <div class="common_footer-top-col-text">
                        <h1>售后无忧</h1>
                        <p>退换无忧、维修无忧</p>
                    </div>
                </div>
                <div class="common_footer-top-col">
                    <img src="../../img/footer_icon4.png">
                    <div class="common_footer-top-col-text">
                        <h1>特色服务</h1>
                        <p>为您呈现不一样的服务</p>
                    </div>
                </div>
            </div>
            <div class="common_footer-body">
                <div class="common_footer-body-left">
                    <dl>
                        <dt>权益保障</dt>
                        <dd><a href="">7天无理由退货</a></dd>
                        <dd><a href="">正品保障</a></dd>
                        <dd><a href="">订单操作</a></dd>
                    </dl>
                    <dl>
                        <dt>支付方式</dt>
                        <dd><a href="">微信支付</a></dd>
                        <dd><a href="">支付宝</a></dd>
                        <dd><a href="">银联</a></dd>
                    </dl>
                    <dl>
                        <dt>关于我们</dt>
                        <dd><a href="">聚衣网介绍</a></dd>
                        <dd><a href="">在线客服</a></dd>
                        <dd><a href="">资质证明</a></dd>
                    </dl>
                    <dl>
                        <dt>聚衣特色</dt>
                        <dd><a href="">个性定制</a></dd>
                        <dd><a href="">厂商提供</a></dd>
                        <dd><a href="">售后服务</a></dd>
                    </dl>
                    <dl>
                        <dt>商务合作</dt>
                        <dd><a href="">申请商家入驻</a></dd>
                        <dd><a href="">商家后台</a></dd>
                        <dd><a href="">联系我们</a></dd>
                    </dl>
                </div>
                <div class="common_footer-body-right">
                    <h1>聚衣客户端下载</h1>
                    <img src="../../img/jyApk.png">
                </div>
            </div>
            <div class="common_footer-foot">
                <p>Copyright 江苏聚衣网络科技有限公司 苏ICP备17069327号-1</p>
            </div>
        </div>
    </div>
    `
});

// 商品列表-单个项
let base_product_item = {
    template: `
    <div class="base-pro-item-wrap">
        <a :href="pro.pcUrl">
            <div class="img-wrap">
                <img :src="pro.picImg">
            </div>
        </a>
        <div class="info-wrap">
            <div>
                <p class="line1">
                    <span class="price"><span class="unit">￥</span>{{pro.showPrice}}</span>
                    <span class="tag" v-show="pro.manjian==1">满减</span>
                    <span class="tag" v-show="pro.baoyou==1">包邮</span>
                </p>
                <a :href="pro.pcUrl"><p class="title">{{pro.name}}</p></a>
            </div>
            <div class="cart-wrap" @click="addCart(pro)"><i class="icon-cart-white"></i></div>
        </div>
    </div>
    `,
    props: ['pro'],
    methods: {
        addCart(pro) {
            window.location.href = '../../html/goods/goods-detalis.html?productId=' + pro.productId;
        }
    }
}

// 商品列表
let base_product_list = {
    template: `
    <div class="base-pro-list">
        <pro-item v-for="(pro,index) in prolist" :key="index" :pro="pro"></pro-item>
    </div>
    `,
    props: ['prolist'],
    components: {
        'pro-item': base_product_item
    }
}

// 分类筛选-单个项
let cate_shaixuan_item = {
    template: `
    <div class="cate-shaixuan-item-wrap">
        <div class="cate-left">
            {{cate.name}}：
        </div>
        <div class="cate-right">
            <div class="item-list h36">
                <div class="item" v-for="(name,index) in cate.list" :key="index">{{name}}</div>
            </div>
            <div class="more">更多<i class="icon-arr-down"></i></div>
        </div>
    </div>
    `,
    props: ['cate']
}

// 分类筛选
let cate_shaixuan = {
    template: `
    <div class="cate-shaixuan-wrap">
        <cate-item v-for="(cate,index) in catelist" :key="index" :cate="cate"></cate-item>
    </div>
    `,
    props: ['catelist'],
    components: {
        'cate-item': cate_shaixuan_item
    }
}

// 排序
let paixu = {
    template: `
    <div class="paixu-wrap">
        <div class="paixu-left">
            <div class="paixu-items-wrap">
                <span @click="changeType(1)" class="item" :class="{'active': type==1}">默认<i class="icon-down"></i></span>
                <span @click="changeType(2)" class="item" :class="{'active': type==2}">销量<i class="icon-down"></i></span>
                <span @click="changeType(3)" class="item" :class="{'active': type==3}">价格<i class="icon-down-up"></i></span>
            </div>
            <div class="price-wrap">
                <div class="input-wrap">￥<input v-model="minprice"></div>
                <span class="gang">-</span>
                <div class="input-wrap">￥<input v-model="maxprice" @keyup.enter="getprice"></div>
            </div>
        </div>
       <!-- <div class="page-wrap">
            <span class="page-num">1/{{titalcount}}</span>
            <span @click="prvePage(cur) class="arr-wrap disabled"><i class="icon-arr-left"></i></span>
            <span @click="nextPage(cur) class="arr-wrap"><i class="icon-arr-right"></i></span>
        </div>-->
    </div>
    `,
    props: ['titalcount'],
    data() {
        return {
            type: 1,
            minprice: null,
            maxprice: null,
        }
    },
    methods: {
        changeType(i) {
            this.type = i;
            this.$emit('getpaixu', this.type, this.minprice, this.maxprice);
        },
        getprice() {
            this.$emit('getpaixu', this.type, this.minprice, this.maxprice);
        }
    }
}



//分页
Vue.component("common-page", {
    props: ['current', 'all'],
    template: `
    <div class="page-bar">
    <ul>
      <li><a :class="[ setButtonClass(0) ]" @click="prvePage(cur)">上一页</a></li>
      <li v-for="index in indexs" :class="{ active: cur == index }">
         <a @click="btnClick(index)">{{ index < 1 ? "..." : index }}</a>
      </li>
      <li><a :class="[ setButtonClass(1) ]" @click="nextPage(cur)">下一页</a></li>
      <li class="page-info">共{{all}}页 到第<input v-model="userpage">页 </li>
      <li><a @click="btnClick(parseInt(userpage))">确定</a></li>
    </ul>
  </div>
    `,
    data() {
        return {
            cur: this.current,
            num: 30,
            limit: 5,
            userpage: ''
        }
    },
    methods: {
        // 页码点击事件
        btnClick: function(data) {
            if (data < 1) return;
            if (data != this.cur) {
                this.cur = data
                this.$emit('btn-click', data)
            }
        },
        // 下一页
        nextPage: function(data) {
            if (this.cur >= this.all) return;
            this.btnClick(this.cur + 1);
        },
        // 上一页
        prvePage: function(data) {
            if (this.cur <= 1) return;
            this.btnClick(this.cur - 1);
        },
        // 设置按钮禁用样式
        setButtonClass: function(isNextButton) {
            if (isNextButton) {
                return this.cur >= this.all ? "page-button-disabled" : ""
            } else {
                return this.cur <= 1 ? "page-button-disabled" : ""
            }
        }
    },
    computed: {
        indexs: function() {
            var left = 1
            var right = this.all
            var ar = []
            if (this.all >= 11) {
                if (this.cur > 5 && this.cur < this.all - 4) {
                    left = this.cur - 5
                    right = this.cur + 4
                } else {
                    if (this.cur <= 5) {
                        left = 1
                        right = 10
                    } else {
                        right = this.all
                        left = this.all - 9
                    }
                }
            }
            while (left <= right) {
                ar.push(left)
                left++
            }
            if (ar[0] > 1) {
                ar[0] = 1;
                ar[1] = -1;
            }
            if (ar[ar.length - 1] < this.all) {
                ar[ar.length - 1] = this.all;
                ar[ar.length - 2] = 0;
            }
            return ar
        }
    }
});

// 全球购-分类筛选
let cate_type = {
    template: `<div class="cate-type-wrap">
        <a href="javascript:;" v-for="(item,index) in adlist" class="item" :class="{'active':i==index}" @click="changeType(item.href,index)"  :key="index">{{item.title}}</a>
    </div>`,
    props: ["adlist"],
    data() {
        return {
            i: 0
        }
    },
    methods: {
        changeType(sortId, index) {
            this.i = index;
            /*var sortId=83+this.i;*/
            this.$emit('callback', sortId);
        }
    }
}

// 店铺优惠券-单项
let shop_coupon = {
    props: ['coupon'],
    template: `<div class="shop-coupon-wrap">
    <div class="coupon-info" style="padding-left:20px; padding-right: 15px;">
        <div style="width: 270px; height: 89px; ">
            <div style="float: left;font-size: 26px; line-height: 25px;">
                <span>￥</span>
                <span>{{coupon.faceValue}}</span>
            </div>
            <div style="float: right; font-size: 16px;">                
                <span style="background-color: #ffd2a2; color: #a55500; border-radius: 3px; padding: 5px 5px;">{{coupon.useCondition == 0 ? "全额抵用" : '满'.concat(coupon.useCondition).concat('元可用')}}</span>
            </div>
            <div style="width:270px; height:50px;  clear: both; padding-left:5px; padding-right: 15px; padding-top: 10px; font-size: 30px; overflow: hidden;text-overflow:ellipsis; white-space: nowrap; cursor: pointer;" title="{{coupon.couponName}}">{{coupon.couponName}}</div>
        </div>
        <div style="padding-left:5px; font-size: 14px;">有效期：{{coupon.startTime}}&nbsp;~&nbsp;{{coupon.endTime}}</div>
    </div>
    <ul class="coupon-bod left"><li v-for="n in 7"></li></ul>
    <ul class="coupon-bod right"><li v-for="n in 7"></li></ul>
    <div class="coupon-state">
        <a @click="receiveCoupon(coupon.couponNo,coupon.startTime,coupon.endTime,coupon.numberLimit)"><p>立即领取</p></a>
    </div>
    </div>`,
    methods: {
        receiveCoupon(couponNo, startTime, endTime, numberLimit) {
            var href = urlParam.href();
            //领取优惠券
            axios({
                method: 'post',
                url: urlParam.domain() + '/api/myCoupon/getCoupons',
                params: {
                    couponNo: couponNo,
                    businessId: href.businessId,
                    couponType: 1, //1代表商家优惠券
                    startTime: startTime,
                    endTime: endTime,
                    numberLimit: numberLimit,
                    token: urlParam.token()
                },
            }).then(function(response) {
                if (response.data.code == 401) {
                    alert(response.data.message);
                } else {
                    alert(response.data.data);
                }
            });
        },
    }
}

// 店铺优惠券-列表
let shop_coupon_list = {
    props: ['couponlist'],
    template: `<div class="shop-coupon-list">
        <shop-coupon v-for="(coupon,index) in couponlist" :key="index" :coupon="coupon"></shop-coupon>
    </div>`,
    components: {
        'shop-coupon': shop_coupon
    }
}

// 个人中心：左侧边栏
Vue.component('leftnav', {
    props: ["navtext"],
    template: `
        <div class="user-leftNav">
            <dl v-for="item in navlist">
                <dt><i :class="item.title.icon"></i> {{item.title.text}}</dt>
                <dd v-for="subitem in item.nav"><a :class="{'active':navtext==subitem.text}" :href="subitem.href">{{subitem.text}}</a></dd>
            </dl>
        </div>
    `,
    data() {
        return {
            navlist: [ //
                {
                    title: {
                        text: "购物中心",
                        icon: "icon-usercenter_gouwu",
                    },
                    nav: [ //
                        {
                            text: "我的定制",
                            href: "../../html/usercenter/Customized.html",
                        },
                    ]
                },
                {
                    title: {
                        text: "订单中心",
                        icon: "icon-usercenter_dingdan",
                    },
                    nav: [ //
                        {
                            text: "我的订单",
                            href: "../../html/usercenter/order_list.html",
                        },
                        {
                            text: "个性定制",
                            href: "../../html/usercenter/gexingdingzhi.html",
                        },
                        {
                            text: "评价管理",
                            href: "../../html/usercenter/pingjia.html",
                        },
                    ]
                },
                {
                    title: {
                        text: "资产中心",
                        icon: "icon-usercenter_zichan",
                    },
                    nav: [ //
                        {
                            text: "会员中心",
                            href: "../../html/usercenter/huiyuan.html",
                        },
                        {
                            text: "我的余额",
                            href: "../../html/usercenter/balance.html",
                        },
                        {
                            text: "我的积分",
                            href: "../../html/usercenter/score.html",
                        },
                        {
                            text: "我的优惠券",
                            href: "../../html/usercenter/coupon.html",
                        },
                        {
                            text: "我的发票",
                            href: "../../html/usercenter/invoice.html",
                        },
                    ]
                },
                {
                    title: {
                        text: "收藏中心",
                        icon: "icon-usercenter_shoucang",
                    },
                    nav: [ //
                        {
                            text: "收藏的商品",
                            href: "../../html/usercenter/save_center.html",
                        },
                        {
                            text: "关注的店铺",
                            href: "#",
                        },
                    ]
                },
                {
                    title: {
                        text: "退款维权",
                        icon: "icon-usercenter_tuikuan",
                    },
                    nav: [ //
                        {
                            text: "退款管理",
                            href: "../../html/usercenter/refund.html",
                        },
                        {
                            text: "售后管理",
                            href: "../../html/usercenter/afterSale.html",
                        },
                    ]
                },
            ], //end of navlist
        }
    },
    created() {
        //验证是否登录
        userLogin.ifLogin();
        userLogin.userInfo();
    },
})

//上传图片
/*
注意事项：
1.
    preimg是一个对象
    preimg:{
        base64:[""],//这个 preimg.base64 才是 预览图
        url: [""], //最后ajax提交表单信息时，提交的url路径，这个是单张图片上传完毕后台返回的url路径
    }
    这是因为vue2中不允许组件更改vue实例中的data，做出的决定
    vue实例中data的
    companyLogo: {
        base64: [""], //企业 logo base64码
        url: [""], //最后ajax提交表单信息时，提交的url路径，这个是单张图片上传完毕后台返回的url路径
    }
    companyLogo可以更改，随意起名，但是里面的 base64: [""] 不可更改
2.
    因为预计用预览图的base64码上传图片，所以最好还是限制图片的体积为好
3.
    因为提示框使用了element ui 所以 需要引入相应的js与css
*/
/*
testOption 为验证图片的验证项 格式为josn 不设置的就不会验证 图片格式必须验证
testOption:{
    //type:function,//图片的格式 项目中统一为 jpg png 在 globalAPI.testImgType 中已经设置
    minwidth:100,//图片最小宽 不能小于 可以等于
    minheight:100,//图片最小高
    maxwidth:100,//图片最大高 不能大于 可以等于
    maxheight:100,//图片最大高
    width:100,//图片宽 必须相等
    height:100,//图片高
    volume:1024,//图片体积 单位是kb 1024就是指 1MB
    maxlength:1,//限制图片的数量 不设置默认为1
    proportion:1,//限制图片的宽高比例 为 宽:高
}
*/
Vue.component("common-upimg", {
    props: ["preimg", "testoption"],
    template: `
    <div class="common_upimg-box">
        <div class="common_upimg" v-for="item,index in preimg.base64">
            <input type="file" accept="image/*" @change="chooseLogo($event,index)" v-show="!item">
            <img :src="item?item:'../../img/company_entry_upimg.png'">
            <div class="common_upimg-remove" title="删除" v-show="item" @click="clickRemove($event,index)"><div></div></div>
        </div>
        <!-- 提示框 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="400px">
            <span>{{dialogTitle}}</span>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                <el-button type="primary" @click="dialogVisible = false">{{dialogBtnText}}</el-button>
            </span>
        </el-dialog>
    </div>
    `,
    data: function() {
        return {
            //提示文字
            dialogVisible: false, //控制 显示、隐藏提示框
            dialogTitle: "", //提示框 标题
            dialogBtnText: "", //提示框 按钮文字
            ajaxurl: urlParam.domain() + "/api/uploads/upload", //上传图片ajax接口
        }
    },
    methods: {
        //显示提示框 接受josn格式的参数
        //showdialog({title:"",btnText:""})
        showdialog(josn) {
            this.dialogVisible = true; //显示
            this.dialogTitle = josn.title; //标题
            this.dialogBtnText = josn.btnText; //按钮文字
        },
        //选择图片 验证图片 验证成功后预览图片
        //先验证文件格式 文件大小 最后 验证图片尺寸 
        chooseLogo(e, index) {
            var testoption = this.testoption; //验证项
            var that = this; //that指向vue实例
            var fileInput = e.currentTarget; //用于 清除input中的文件
            //验证失败 清除 input file 里的文件
            var failTest = function() {
                fileInput.value = "";
            };
            //验证成功 显示预览图 判断是否增加下一个上传图片input 保存ajax返回的图片路径
            var successTest = function(base64) {
                fileInput.value = ""; //不管成不成功都删除input里的文件
                if (that.ajaxurl) {
                    //ajax上传单张图片
                    axios({
                        method: 'post',
                        url: that.ajaxurl,
                        data: {
                            base64: base64,
                            token: urlParam.token()
                        },
                        transformRequest: [function(data) {
                            let ret = ''
                            for (let it in data) {
                                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                            }
                            return ret
                        }]
                    }).then(function(res) { //成功上传 返回图片路径
                        Vue.set(that.preimg.base64, index, base64); //保存 显示 预览图
                        //判断是否增加下一个上传图片input
                        if (that.preimg.base64.length < that.testoption.maxlength) {
                            that.preimg.base64.push("");
                        };
                        that.preimg.url[index] = res.data.data; //保存图片路径
                        console.log(that.preimg.url);
                    }).catch(function(error) { //上传失败 提示
                        that.showdialog({ title: "上传失败，可能是网速原因，请再次上传", btnText: "好 的" });
                    });
                } else {
                    Vue.set(that.preimg.base64, index, base64); //保存 显示 预览图
                    //判断是否增加下一个上传图片input
                    if (that.preimg.base64.length < that.testoption.maxlength) {
                        that.preimg.base64.push("");
                    };
                    console.log("注意，没有ajax上传，现在仅为前端测试");
                }
            };
            //验证图片格式
            var imgtype = fileInput.value.split(".");
            imgtype = imgtype[imgtype.length - 1]; //获取文件后缀
            if (!globalAPI.testImgType(imgtype)) {
                this.showdialog({ title: "您的文件格式不符", btnText: "好 的" });
                failTest();
                return;
            }
            var file = fileInput.files[0]; //得到input file 里的文件对象file
            //如果需要验证图片的体积
            if (testoption.volume) {
                //验证文件大小
                var size = file.size; //上传 文件 的大小 单位byte
                //图片大小限制为20kb以内
                if (size > testoption.volume * 1024) {
                    this.showdialog({
                        title: "您的图片体积为" + (size / 1024).toFixed(2) + "kb，超过" + testoption.volume + "kb限制",
                        btnText: "好 的"
                    });
                    failTest();
                    return;
                };
            }
            //获取图片base64码
            var reader = new FileReader();
            reader.readAsDataURL(file); //传入文件对象file
            reader.onload = function(e) { //读取 文件对象file 完成
                var base64 = e.target.result; //文件对象file 图片base64码
                //如果不需要验证图片尺寸
                if (!(testoption.minwidth || testoption.minheight || testoption.maxwidth || testoption.maxheight || testoption.width || testoption.height)) {
                    successTest(base64);
                    return;
                }
                //创建一个隐藏的 img 标签
                document.getElementsByTagName("body")[0].insertAdjacentHTML("beforeend", `<img src="" id="imgsize" style="display:none;">`);
                var imgHide = document.getElementById("imgsize"); //隐藏的img标签，用于获取图片尺寸
                imgHide.src = base64;
                imgHide.onload = function() { //图片加载完成 此隐藏图片用来获取图片尺寸
                    var width = imgHide.width; //图片宽
                    var height = imgHide.height; //图片高
                    imgHide.remove(); //将创建的隐藏的 img 标签删除
                    //验证 图片尺寸
                    //验证 图片最小宽度
                    if (testoption.minwidth) {
                        if (width < testoption.minwidth) { //图片宽度小于最小宽度 验证失败
                            that.showdialog({ title: "您的图片宽度过小", btnText: "好 的" });
                            failTest();
                            return;
                        }
                    }
                    //验证 图片最小高度
                    if (testoption.minheight) {
                        if (height < testoption.minheight) { //图片宽高度小于最小高度 验证失败
                            that.showdialog({ title: "您的图片高度过小", btnText: "好 的" });
                            failTest();
                            return;
                        }
                    }
                    //验证 图片最大宽度
                    if (testoption.maxwidth) {
                        if (width > testoption.maxwidth) { //图片宽度大于最大宽度 验证失败
                            that.showdialog({ title: "您的图片宽度过大", btnText: "好 的" });
                            failTest();
                            return;
                        }
                    }
                    //验证 图片最大高度
                    if (testoption.maxheight) {
                        if (height > testoption.maxheight) { //图片高度大于最大高度 验证失败
                            that.showdialog({ title: "您的图片高度过大", btnText: "好 的" });
                            failTest();
                            return;
                        }
                    }
                    //验证 图片宽度
                    if (testoption.width) {
                        if (width != testoption.width) {
                            that.showdialog({ title: "您的图片宽度不符", btnText: "好 的" });
                            failTest();
                            return;
                        }
                    }
                    //验证 图片高度
                    if (testoption.height) {
                        if (height != testoption.height) {
                            that.showdialog({ title: "您的图片高度不符", btnText: "好 的" });
                            failTest();
                            return;
                        }
                    }
                    //验证 图片宽高比例
                    if (testoption.proportion) {
                        if ((width / height) != testoption.proportion) {
                            that.showdialog({ title: "您的图片宽高比例不符", btnText: "好 的" });
                            failTest();
                            return;
                        }
                    }
                    //通过验证 显示预览图
                    successTest(base64);
                }
            }
        },
        //点击删除
        clickRemove(e, index) {
            this.preimg.base64.splice(index, 1); //删除预览图
            this.preimg.url.splice(index, 1); //删除图片路径
            //必须保证有一个上传图片 如果没有预览图了，或者最后一个预览图里有值，就添加一个上传图片项
            if (this.preimg.base64.length == 0 || this.preimg.base64[this.preimg.base64.length - 1]) {
                this.preimg.base64.push("");
                this.preimg.url.push("");
                // console.log(this.preimg.url);
            }
        },
    },
    created() {
        if (!this.testoption.maxlength) { //不设置默认为1 单张图片上传
            this.testoption.maxlength = 1;
        }
    }
});
//头像上传
Vue.component("common-logo", {
    props: ["preimg", "testoption"],
    template: `
    <div class="common_logo-box">
        <div class="common_logo" v-for="item,index in preimg.base64">
            <input type="file" accept="image/*" @change="chooseLogo($event,index)" v-show="item">
            <img :src="item?item:'../../img/company_entry_upimg.png'">
            <!--<div class="common_upimg-remove" title="删除" v-show="item" @click="clickRemove($event,index)">-->
        </div>
        <!-- 提示框 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="400px">
            <span>{{dialogTitle}}</span>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
                <el-button type="primary" @click="dialogVisible = false">{{dialogBtnText}}</el-button>
            </span>
        </el-dialog>
    </div>
    `,
    data: function() {
        return {
            //提示文字
            dialogVisible: false, //控制 显示、隐藏提示框
            dialogTitle: "", //提示框 标题
            dialogBtnText: "", //提示框 按钮文字
            ajaxurl: "http://api.juyiline.com/api/upload", //上传图片ajax接口  urlParam.domain()
        }
    },
    methods: {
        //显示提示框 接受josn格式的参数
        //showdialog({title:"",btnText:""})
        showdialog(josn) {
            this.dialogVisible = true; //显示
            this.dialogTitle = josn.title; //标题
            this.dialogBtnText = josn.btnText; //按钮文字
        },
        //选择图片 验证图片 验证成功后预览图片
        //先验证文件格式 文件大小 最后 验证图片尺寸
        chooseLogo(e, index) {
            var testoption = this.testoption; //验证项
            var that = this; //that指向vue实例
            var fileInput = e.currentTarget; //用于 清除input中的文件
            //验证失败 清除 input file 里的文件
            var failTest = function() {
                fileInput.value = "";
            };
            //验证成功 显示预览图 判断是否增加下一个上传图片input 保存ajax返回的图片路径
            var successTest = function(base64) {
                fileInput.value = ""; //不管成不成功都删除input里的文件
                if (that.ajaxurl) {
                    //ajax上传单张图片
                    axios({
                        method: 'post',
                        url: that.ajaxurl,
                        data: {
                            base64: base64
                        },
                        transformRequest: [function(data) {
                            let ret = ''
                            for (let it in data) {
                                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                            }
                            return ret
                        }]
                    }).then(function(res) { //成功上传 返回图片路径
                        Vue.set(that.preimg.base64, index, base64); //保存 显示 预览图
                        //判断是否增加下一个上传图片input
                        if (that.preimg.base64.length < that.testoption.maxlength) {
                            that.preimg.base64.push("");
                        };
                        that.preimg.url[index] = res.data.data; //保存图片路径
                    }).catch(function(error) { //上传失败 提示
                        that.showdialog({ title: "上传失败，可能是网速原因，请再次上传", btnText: "好 的" });
                    });
                } else {
                    Vue.set(that.preimg.base64, index, base64); //保存 显示 预览图
                    //判断是否增加下一个上传图片input
                    if (that.preimg.base64.length < that.testoption.maxlength) {
                        that.preimg.base64.push("");
                    };
                    console.log("注意，没有ajax上传，现在仅为前端测试");
                }
            };
            //验证图片格式
            var imgtype = fileInput.value.split(".");
            imgtype = imgtype[imgtype.length - 1]; //获取文件后缀
            if (!globalAPI.testImgType(imgtype)) {
                this.showdialog({ title: "您的文件格式不符", btnText: "好 的" });
                failTest();
                return;
            }
            var file = fileInput.files[0]; //得到input file 里的文件对象file
            //如果需要验证图片的体积
            if (testoption.volume) {
                //验证文件大小
                var size = file.size; //上传 文件 的大小 单位byte
                //图片大小限制为20kb以内
                if (size > testoption.volume * 1024) {
                    this.showdialog({
                        title: "您的图片体积为" + (size / 1024).toFixed(2) + "kb，超过" + testoption.volume + "kb限制",
                        btnText: "好 的"
                    });
                    failTest();
                    return;
                };
            }
            //获取图片base64码
            var reader = new FileReader();
            reader.readAsDataURL(file); //传入文件对象file
            reader.onload = function(e) { //读取 文件对象file 完成
                var base64 = e.target.result; //文件对象file 图片base64码
                console.log("base64", base64);
                //如果不需要验证图片尺寸
                if (!(testoption.minwidth || testoption.minheight || testoption.maxwidth || testoption.maxheight || testoption.width || testoption.height)) {
                    successTest(base64);
                    return;
                }
                //创建一个隐藏的 img 标签
                document.getElementsByTagName("body")[0].insertAdjacentHTML("beforeend", `<img src="" id="imgsize" style="display:none;">`);
                var imgHide = document.getElementById("imgsize"); //隐藏的img标签，用于获取图片尺寸
                imgHide.src = base64;
                imgHide.onload = function() { //图片加载完成 此隐藏图片用来获取图片尺寸
                    var width = imgHide.width; //图片宽
                    var height = imgHide.height; //图片高
                    imgHide.remove(); //将创建的隐藏的 img 标签删除
                    //验证 图片尺寸
                    //验证 图片最小宽度
                    if (testoption.minwidth) {
                        if (width < testoption.minwidth) { //图片宽度小于最小宽度 验证失败
                            that.showdialog({ title: "您的图片宽度过小", btnText: "好 的" });
                            failTest();
                            return;
                        }
                    }
                    //验证 图片最小高度
                    if (testoption.minheight) {
                        if (height < testoption.minheight) { //图片宽高度小于最小高度 验证失败
                            that.showdialog({ title: "您的图片高度过小", btnText: "好 的" });
                            failTest();
                            return;
                        }
                    }
                    //验证 图片最大宽度
                    if (testoption.maxwidth) {
                        if (width > testoption.maxwidth) { //图片宽度大于最大宽度 验证失败
                            that.showdialog({ title: "您的图片宽度过大", btnText: "好 的" });
                            failTest();
                            return;
                        }
                    }
                    //验证 图片最大高度
                    if (testoption.maxheight) {
                        if (height > testoption.maxheight) { //图片高度大于最大高度 验证失败
                            that.showdialog({ title: "您的图片高度过大", btnText: "好 的" });
                            failTest();
                            return;
                        }
                    }
                    //验证 图片宽度
                    if (testoption.width) {
                        if (width != testoption.width) {
                            that.showdialog({ title: "您的图片宽度不符", btnText: "好 的" });
                            failTest();
                            return;
                        }
                    }
                    //验证 图片高度
                    if (testoption.height) {
                        if (height != testoption.height) {
                            that.showdialog({ title: "您的图片高度不符", btnText: "好 的" });
                            failTest();
                            return;
                        }
                    }
                    //验证 图片宽高比例
                    if (testoption.proportion) {
                        if ((width / height) != testoption.proportion) {
                            that.showdialog({ title: "您的图片宽高比例不符", btnText: "好 的" });
                            failTest();
                            return;
                        }
                    }
                    //通过验证 显示预览图
                    successTest(base64);
                }
            }
        },
        //点击删除
        clickRemove(e, index) {
            this.preimg.base64.splice(index, 1); //删除预览图
            this.preimg.url.splice(index, 1); //删除图片路径
            //必须保证有一个上传图片 如果没有预览图了，或者最后一个预览图里有值，就添加一个上传图片项
        },
    },
    created() {
        if (!this.testoption.maxlength) { //不设置默认为1 单张图片上传
            this.testoption.maxlength = 1;
        }
    }
});